<!DOCTYPE html>
<html lang="zh">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <!-- 引入Vue -->
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://www.kdniao.com/OutDemo/KDNWidget/KDNWidget.css"/>

</head>
<style>
    .spacing {
        margin-bottom: -36px;
    }
</style>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">订单管理</el-breadcrumb-item>
                <el-breadcrumb-item>发货单详情</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-form label-width="100px">
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">供方信息</span>
                    <el-row>
                    <#--金蝶没有该字段-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货单名称：<span style="color:#527c94cc" >金蝶没有该字段</span></h5>-->
                    <#--</el-col>-->

                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">发货单号：<span style="color:#527c94cc" v-if="orderBill_id != 'null'">{{orderBill_id}}</span>
                            </h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">联系人：<span style="color:#527c94cc">{{supply_user}}</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">发货方：<span style="color:#527c94cc">上海品宅装饰科技有限公司</span></h5>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">
                            <h5 style="color: #909399">备注：<span style="color:#527c94cc">{{remark}}</span></h5>
                        </el-col>

                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货人：<span style="color:#527c94cc" v-if="delivery_name != 'null'">{{delivery_name}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">联系方式：<span style="color:#527c94cc" v-if="delivery_phone != 'null'">{{delivery_phone}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--金蝶没有该字段-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">发货金额：<span style="color:#527c94cc" >金蝶没有该字段</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">预计到货时间：<span style="color:#527c94cc" v-if="arriveTime != 'null'">{{arriveTime}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    <#--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8" class="spacing">-->
                    <#--<h5 style="color: #909399">备注：<span style="color:#527c94cc" v-if="remark != 'null'">{{remark}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                    <#--</el-col>-->
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <span style="color:#43515a;font-family: PingFang SC">客户信息</span>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">收货通知人：<span style="color:#527c94cc">{{user_id}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">收货地址及联系方式：<span style="color:#527c94cc">{{consignee_address}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">项目名称：<span style="color:#527c94cc" >{{project_name}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" class="spacing">
                            <h5 style="color: #909399">客户名称：<span style="color:#527c94cc">{{userGroup_name}}</span>
                            </h5>
                        </el-col>
                    </el-row>
                <#--<el-row :gutter="20">-->
                <#--<el-col :span="8" class="spacing">-->
                <#--<h5 style="color: #909399">收货人：<span style="color:#527c94cc" v-if="consignee_information != 'null'">{{consignee_information}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row :gutter="20">-->
                <#--<el-col :span="8" class="spacing">-->
                <#--<h5 style="color: #909399">收货地址：<span style="color:#527c94cc" v-if="consignee_address != 'null'">{{consignee_address}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row :gutter="20">-->
                <#--<el-col :span="8" class="spacing">-->
                <#--<h5 style="color: #909399">联系电话：<span style="color:#527c94cc" v-if="contact != 'null'">{{contact}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                <#--</el-col>-->
                <#--</el-row>-->
                <#--<el-row :gutter="20">-->
                <#--<el-col :span="8" class="spacing">-->
                <#--<h5 style="color: #909399">公司名称：<span style="color:#527c94cc" v-if="userGroup_name != 'null'">{{userGroup_name}}</span><span style="color:#527c94cc" v-else>未填写</span></h5>-->
                <#--</el-col>-->
                <#--</el-row>-->
                </el-card>
<#--<#if success == "fail">-->
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="物流信息" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                    <div id="wuliu"></div>
                </el-row>
<#--</#if>-->
                <br>
                <el-row>
                    <el-col>
                        <el-steps :active="1" simple>
                            <el-step title="发货单明细" icon="el-icon-info" style="margin-left:-8%"></el-step>
                        </el-steps>
                    </el-col>
                </el-row>
                <br>
                <el-table :data="tableData"
                          class="tb-edit"
                          style="width: 100%" highlight-current-row @row-click="handleCurrentChange" size="mini"
                          tooltip-effect="dark" border>
                    <el-table-column label="序号"
                                     type="index"
                                     width="50">
                    </el-table-column>
                    <el-table-column label="订单编号" prop="orderBill_id" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.orderBill_id" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料编码" prop="sku_code" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuCode" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="材料名称" prop="sku_name" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuName" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="品牌" prop="sku_brand" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuBrand" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="单位" prop="sku_unit" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuUnit"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="型号" prop="sku_model" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="规格参数" prop="sku_slug_set" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuModel" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                <#--<el-table-column label="规格参数">-->
                <#--<template scope="scope">-->
                <#--<el-input size="small" v-model="scope.row.modelAndParam" :disabled="true"></el-input>-->
                <#--</template>-->
                <#--</el-table-column>-->
                    <el-table-column label="价格" prop="sku_contract_price" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.skuPrice"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="要货数量" prop="purNum" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.purNum"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="发货数量" prop="sendNum" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.sendNum"-->
                    <#--@change="handleEdit(scope.$index, scope.row)" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                <#--金蝶没有该字段-->
                    <el-table-column label="预计到货时间" prop="arriveTime" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.arriveTime" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>
                    <el-table-column label="备注" prop="sku_remark" :show-overflow-tooltip=true>
                    <#--<template scope="scope">-->
                    <#--<el-input size="small" v-model="scope.row.arriveTime" :disabled="true"></el-input>-->
                    <#--</template>-->
                    </el-table-column>


                </el-table>
                <br><br>
                <el-form-item>
                </el-form-item>
                <el-form-item>
                    <#if success == "success">
                    <el-button type="primary" @click="confirmForm()">确认</el-button>
                    </#if >
                    <a href="/order/dispatch.page">
                        <el-button>返回</el-button>
                    </a>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
    <el-dialog title="确认发货信息" :visible.sync="dialogOrderVisible" width="70%">
        <el-form label-width="120px">
            <el-row>
                <el-col>
                    <el-form-item label="收货人">
                        <el-select v-model="userIdList" multiple filterable placeholder="请选择" style="width: 100%">
                            <el-option
                                    v-for="item in userList"
                                    :key="item.id"
                                    :label="item.user_name"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="物流单号">
                        <el-input v-model="transport_billNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col>
                    <el-form-item label="备注">
                        <el-input type="textarea" v-model="remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-button type="primary" @click="submitForm()">提交</el-button>
    </el-dialog>
</div>
</body>
</html>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script src="/js/KDNWidget.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogOrderVisible: false,
                delivery_name: "",
                orderBill_id: "${orderNo}",
                delivery_phone: "",
                crtTime: "",
                price: "",
                user_id: "",
                supply_user: '',
                remark: "",
                delivery: "",
                address: "",
                contact: "",
                userGroup_id: "",
                userGroup_name: "",
                consignee_address: "",
                consignee_information: "",
                baseBillController: "",
                project_name: '',
                tableData: [],
                response_data: "",
                sku_sum_price: 0,
                freight: 0,//运费价格
                sales_order_price: 0,
                //当前页
                currentPage: 1,
                //每页数量
                pagesize: 10,
                //总页数
                total: "",
                userList: [],
                userIdList: [],
            }
        },

        methods: {
            handleSizeChange(val) {
                this.pagesize = val;
            },
            CurrentChange(val) {
                this.currentPage = val;
            },
            handleCurrentChange(row, event, column) {
                console.log(row, event, column, event.currentTarget)
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getUserList() {
                $.ajax({
                    url: '/user/getUserListByCompanyId.json?companyId=' + this.userGroup_id,
                    type: 'get',
                    // async: false,
                    dataType: 'json',
                    success: (result) => {
                        if (result.ret) {
                            this.userList = result.data;
                        } else {
                        }
                    }
                });
            },
            confirmForm() {
                this.getUserList();
                this.dialogOrderVisible = true;
            },
            submitForm() {
                console.log(this.userIdList);
                console.log(JSON.stringify(this.userIdList));
                if (this.userIdList.length > 0) {
                    $.ajax({
                        url: '/order/updateDispatchOrder.json',
                        type: 'POST',
                        data: {
                            orderBill_id: "${orderNo}",
                            orderBean_pk: "${orderBean_pk}",
                            orderBill_flow: "20",
                            user_id: JSON.stringify(this.userIdList),
                            transport_billNo: this.transport_billNo,
                            remark: this.remark
                        },
                        // async: false,
                        dataType: 'json',
                        success: (result) => {
                            if (result.ret) {
                                this.$message({
                                    type: 'success',
                                    message: '修改成功',
                                    duration: 6000
                                });
                                window.location.href = "/order/dispatch.page";
                            } else {
                                this.$message.error(result.msg);
                            }
                        }
                    });
                } else {
                    this.$message.error("收货人不能为空");
                    return false;
                }

            },
            ajaxFunction() {
                $.ajax({
                    url: '/order/billDetail.json',
                    type: 'POST',
                    data: {orderNo: "${orderNo}", type: 20, orderBean_pk: "${orderBean_pk}"},
                    // contentType: "application/json",
                    // async: false,
                    dataType: 'json',
                    success: (result) =>{
                        if (result.ret) {
                            this.showDetailMsg(result.data);
                        }else{
                            this.$message.error("请求失败，请稍后重试");
                        }
                    }
                });
            },
            showDetailMsg(resultData) {
                this.response_data = resultData;
                this.supply_user = resultData.supply_user;
                this.delivery_name = resultData.delivery_name;
                this.orderBill_id = resultData.orderBill_id;
                this.crtTime = resultData.crtTime;
                this.price = resultData.price;
                this.delivery_phone = resultData.delivery_phone;
                this.userGroup_id = resultData.userGroup_id;
                this.userGroup_name = resultData.userGroup_name;
                this.user_id = resultData.user_id;
                console.log(resultData);
                this.remark = resultData.remark;
                this.consignee_information = resultData.consignee_information;
                this.consignee_address = resultData.consignee_address;
                this.transport_company = resultData.transport_company;
                this.transport_billNo = resultData.transport_billNo;
                this.freight = resultData.transport_price;
                this.contact = resultData.consignee_phone;
                this.project_name = resultData.project_name;
                var orderDetailList = resultData.context;

                var arr_table = new Array();
                for (var i = 0; i < orderDetailList.length; i++) {
                    var map = orderDetailList[i];
                    var obj_table = new Object();
                    obj_table.orderBill_id = map.orderBill_id;
                    obj_table.sku_code = map.sku_code;
                    obj_table.sku_name = map.sku_name;
                    obj_table.sku_brand = map.sku_brand;
                    obj_table.sku_model = map.sku_model;
                    obj_table.sku_unit = map.sku_unit;
                    obj_table.sku_slug_set = map.sku_slug_set;
                    obj_table.arriveTime = map.arriveTime;
                    obj_table.sku_price = map.sku_price;
                    obj_table.purNum = map.purNum;
                    obj_table.sendNum = map.sendNum;
                    obj_table.sku_contract_price = map.sku_contract_price;
                    obj_table.sku_remark = map.sku_remark;
                    // obj_table.supplyCycle = map.supplyCycle //供货周期
                    arr_table.push(obj_table);
                }
                var transport_company = this.transport_company;
                var transport_billNo = this.transport_billNo;
                this.tableData = arr_table;
                var json = "";
                var boolean = false;
                if (transport_billNo != "") {
                    $.ajax({
                        url: '/order/logistics.json',
                        type: 'get',
                        data: {no: transport_billNo},
                        // contentType: "application/json",
                        async: false,
                        dataType: 'json',
                        success: function (result) {
                            if (result.ret) {
                                boolean = result.ret;
                                json = result.data;
                            }
                        }
                    });
                    if (boolean) {
                        transport_company = json;
                    }
                }
                window.onload = function () {
                    KDNWidget.run({
                        serviceType: "B",
                        expCode: transport_company,
                        expNo: transport_billNo,
                        showType: "normal",
                        container: "wuliu"
                    })
                }
            }
        },
        /** 初始化参数的时候使用 */
        async mounted() {
            this.ajaxFunction();
        }
    });

</script>
<#--<script type="text/javascript" src="/base/js/salesOrderDetail.js"></script>-->


